<template>
  <div id="hello">
    <x-header>标题</x-header>
    <div>
      <router-view/>
    </div>
    <tabbar class="m-tabbar">
      <tabbar-item selected link='/index' class='m-tabbar-item'>
        <img slot="icon" src="./../assets/images/welcome.png">
        <span slot="label">欢迎</span>
      </tabbar-item>
      <tabbar-item link='/home' class='m-tabbar-item'>
        <img slot="icon" src="./../assets/images/home.png">
        <span slot="label">主页</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import { XHeader, Tabbar, TabbarItem } from 'vux'
export default {
  name: 'AppIndex',
  components: {
    XHeader,
    Tabbar,
    TabbarItem
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.m-tabbar{
    display: flex;
    flex-direction: row;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding-bottom: 10px;
    overflow: hidden;
    height: 50px;
    background: #fff;
    border-top: 1px solid #e4e4e4;
    .m-tabbar-item{
      flex: 1;
      text-align: center;
      margin-top: 0px;
      .m-tabbar-item-icon{
          display: block;
          padding-top: 2px;
          img{
              width: 28px;
              height: 28px;
          }
      }
      .m-tabbar-item-text{
          margin-top: 0px;
          display: block;
          font-size: 10px;
          color:#949494;
      }
      &.is-active{
          .m-tabbar-item-text{
              color: #42bd56;
          }
      }
  }
}

.m-tabbar span{
  margin-top: 0px;
}
</style>
